import { Button, Drawer } from "antd"
import lessModule from "./index.module.less"
import HomePage_ModalComponent_HeaderNormalComponent from "../../../../../../component/modal/component/headerNormal"
import HomePage_CardTitleComponent from "../../../../../../component/cardtitle"
import { $constantList } from "../../../../../../../../common/utils"
import { ReactComponent as FiveOneOnOneSvg } from '../../../../../../../../assets/svg/500OneOnOne.svg'
import { ReactComponent as TwoOneOnOneSvg } from '../../../../../../../../assets/svg/220OneOnOne.svg'
import { ReactComponent as TwoOneToMany } from '../../../../../../../../assets/svg/220OneToMany.svg'
import { useState } from "react"
import { number } from "echarts"
import HomePage_PanoramicMonitoringPage_LayerComponent_LineModalComponent_StraightCardComponent from "../straightCard"

// 主页-全景监控页面-浮层组件-线路弹窗组件
interface componentInterface {
    name: string
    sourceData: object
    change_cancel: Function
}
const HomePage_PanoramicMonitoringPage_LayerComponent_LineModalComponent: React.FC<componentInterface> = (props) => {
    const cardRowList = [
        [
            {
                label: "巡维中心",
                key: "maintainCentre",
            },
            {
                label: "设备安装站点",
                key: "stationName",
            },
            {
                label: "通信地址",
                key: "mailingAddress",
            },
            {
                label: "线路型号",
                key: "lineModel",
            },
            {
                label: "线路长度",
                key: "length",
                unit:"km"
            },
        ],
        [
            {
                label: "接地方式",
                key: "groundMethod",
            },
            {
                label: "监测装置类型",
                key: "monitorDevice",
            },
            {
                label: "建设日期",
                key: "buildDate",
            },
            {
                label: "直连站点",
                key: "connecSiteName",
            },
        ]
    ]

    return (
        <div className={lessModule["homePagePanoramicMonitoringPageLayerComponentLineModalComponent"]}>
            <HomePage_ModalComponent_HeaderNormalComponent name={props.name} fontSize={20} padding="14px 24px" change_cancel={props.change_cancel} />
            <main className={lessModule["homePagePanoramicMonitoringPageLayerComponentLineModalComponent-main"]}>
                <HomePage_CardTitleComponent title="监测数据" bgColor="#FFFFFF" border="1px solid rgba(0, 0, 0, 0.15)" margin="13px 0" />


                <div className={lessModule["homePagePanoramicMonitoringPageLayerComponentLineModalComponent-main__card"]}>
                    <div className={lessModule["main-card__column"]}>
                        <div>{props.sourceData["lineName"]}</div>
                        <div className={lessModule["card-column__value"]} style={{ color: $constantList["stationStatusColor"][props.sourceData["status"]] }}>
                            <span> {props.sourceData["realData"] ?? "-"}</span>
                            <span className={lessModule["column-value__unit"]}> {props.sourceData["realData"] ? "A" : ""}</span>
                        </div>
                    </div>
                </div>

                <HomePage_CardTitleComponent title="详细信息" bgColor="#FFFFFF" border="1px solid rgba(0, 0, 0, 0.15)" margin="13px 0" />
                <div className={lessModule["homePagePanoramicMonitoringPageLayerComponentLineModalComponent-main__info"]}>
                    <HomePage_PanoramicMonitoringPage_LayerComponent_LineModalComponent_StraightCardComponent cardRowList={cardRowList} sourceData={props.sourceData} />
                </div>
            </main>
            {/* <footer className={lessModule["homePagePanoramicMonitoringPageLayerComponentLineModalComponent-footer"]}>
                <Button className={lessModule["homePagePanoramicMonitoringPageLayerComponentLineModalComponent-footer__btn"]} type="primary">控制远动开关</Button>
            </footer> */}
        </div>
    )
}



export default HomePage_PanoramicMonitoringPage_LayerComponent_LineModalComponent